<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <script src="/jquery.min.js"></script>
    <link rel="stylesheet" href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".searchBUtton").click(function () {
                var str = $("input[name='keyword']").val();
                var url= "/demo/ajax";
                var data = {"str":str};
                $.post(
                    url,
                    data,
                    function(r){
                        alert(r);
                    }
                );

            });
        });
    </script>
</head>
<body>
<div>
    <a href="#"><img class="logo" src="http://how2j.cn/tmall/img/site/logo.gif" id="log"></a>
    <div class="searchDiv" >
        <input type="text" placeholder="umakr 优码客" name="keyword">
        <button class="searchBUtton" type="submit">搜索</button>
        <div class="searchBelow">
            <span><a href="#">平衡车</a><span>|</span></span>
            <span><a href="#">扫地机器人</a><span>|</span></span>
            <span><a href="#">原汁机</a><span>|</span></span>
            <span><a href="#">冰箱</a><span>|</span></span>
        </div>
    </div>
</div>
<div style="height: 500px"></div>
</body>
</html>